<script>
/**
 * Recent activity component
 */
export default {
  props: {
    type: {
      value: Number,
    },
  },
  data() {
    return {
      activityData: [
        {
          icon: "ri-edit-2-fill",
          date: "28 Apr, 2020 ",
          time: "12:07 am",
          title: "Responded to need “Volunteer Activities”",
        },
        {
          icon: "ri-user-2-fill",
          date: "21 Apr, 2020 ",
          time: "08:01 pm",
          title: "Added an interest “Volunteer Activities”",
        },
        {
          icon: "ri-bar-chart-fill",
          date: "17 Apr, 2020 ",
          time: "05:10 pm",
          title: "Responded to need “In-Kind Opportunity”",
        },
        {
          icon: "ri-calendar-2-fill",
          date: "07 Apr, 2020",
          time: "12:47 pm",
          title: "Created need “Volunteer Activities”",
        },
        {
          icon: "ri-edit-2-fill",
          date: "05 Apr, 2020 ",
          time: "03:09 pm",
          title: "Attending the event “Some New Event”",
        },
        {
          icon: "ri-user-2-fill",
          date: "02 Apr, 2020 ",
          time: "12:07 am",
          title: "Responded to need “In-Kind Opportunity”",
        },
        {
          icon: "ri-user-2-fill",
          date: "02 Apr, 2020 ",
          time: "12:07 am",
          title: "Responded to need “In-Kind Opportunity”",
        },
        {
          icon: "ri-user-2-fill",
          date: "02 Apr, 2020 ",
          time: "12:07 am",
          title: "Responded to need “In-Kind Opportunity”",
        },
      ],
    };
  },
};
</script>

<template>
  <div class="card">
    <div class="card-body">
      <!-- <b-dropdown right toggle-class="arrow-none card-drop" class="float-right" variant="white">
        <template v-slot:button-content>
          <i class="mdi mdi-dots-vertical"></i>
        </template>
        
        <b-dropdown-item>Sales Report</b-dropdown-item>
        
        <b-dropdown-item>Export Report</b-dropdown-item>
        
        <b-dropdown-item>Profit</b-dropdown-item>
        
        <b-dropdown-item>Action</b-dropdown-item>
      </b-dropdown> -->
      <div class="float-right" style="min-height: 666px">
        <span style="cursor: pointer">
          <i
            style="
              font-size: 18px;
              vertical-align: text-bottom;
              margin-right: 5px;
            "
            class="el-icon-refresh-right"
          ></i>
        </span>

        <span style="cursor: pointer">
          <span>查看更多</span>
          <i
            style="font-size: 15px; vertical-align: bottom"
            class="ri-arrow-right-s-line"
          ></i>
        </span>
      </div>

      <h4 v-if="type == 1" class="card-title mb-4" style="font-size: 17px">
        <!-- <i style="font-size: 20px;vertical-align: sub;" class="ri-file-excel-line"></i> -->
        <i
          style="font-size: 20px; vertical-align: bottom"
          class="el-icon-folder-delete"
        ></i>
        采集异常日志
      </h4>
      <h4 v-if="type == 2" class="card-title mb-4" style="font-size: 17px">
        <i
          style="font-size: 20px; vertical-align: sub"
          class="ri-close-circle-line"
        ></i>
        解析异常日志
      </h4>
      <h4 v-if="type == 3" class="card-title mb-4" style="font-size: 17px">
        <i
          style="font-size: 20px; vertical-align: sub"
          class="ri-thunderstorms-line"
        ></i>
        存储异常日志
      </h4>

      <div data-simplebar style="max-height:610px">
        <ul class="list-unstyled activity-wid">
          <li
            class="activity-list"
            v-for="(data, index) in activityData"
            :key="index"
          >
            <div class="activity-icon avatar-xs">
              <span
                class="avatar-title bg-soft-primary text-primary rounded-circle"
              >
                <!-- <i :class="`${data.icon}`"></i> -->
                <i v-if="type == 1" class="ri-bar-chart-fill"></i>
                <i v-if="type == 2" class="ri-user-2-fill"></i>
                <i v-if="type == 3" class="ri-edit-2-fill"></i>
              </span>
            </div>
            <div>
              <div>
                <h5 class="font-size-13">
                  {{ data.date }}
                  <small class="text-muted">{{ data.time }}</small>
                </h5>
              </div>

              <div>
                <p class="text-muted mb-0">{{ data.title }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>